.main {
  background-color: #fff;
  padding-top: 20px;

  overflow: hidden;

  .container {
    width: 1100px;
    margin: 120px auto;
    .section {
      display: flex;
      .left {
        flex: 0 0 50%;
      }

      .title {
        font-size: 48px;
        font-weight: 600;
        background: linear-gradient(315deg, #42d392 25%, #647eff);
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: left;
        padding: 40px 0;
        line-height: 1.5;
      }

      .tryBtn {
        padding: 15px 30px;
        color: #fff;
        font-size: 16px;
        background: #647eff;
        cursor: pointer;
        display: inline-block;
      }
    }

    .otherWay {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 50px;

      .link {
        text-decoration: none;
        color: #333;
        margin-bottom: 30px;
        display: block;
      }

      .card {
        border-radius: 20px;
        background: #fafafa;
        padding: 4px 15px 0;
        height: 400px;
        text-align: center;
        position: relative;
      }

      .desc {
        font-weight: 500;
        text-align: center;
        margin-top: 10px;
      }
    }

    .item {
      display: flex;
      padding: 20px 10px;
      margin-bottom: 20px;
      text-decoration: none;

      .txt {
        flex: 0 0 40%;
        padding-right: 20px;
        line-height: 1.5;

        .h1 {
          margin-top: 20px;
          color: rgb(0 0 0 / 80%);
        }

        .des {
          margin-top: 20px;
          color: rgb(0 0 0 / 80%);
        }
      }

      .pic {
        flex: 0 0 60%;
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);

        .head {
          padding: 10px;
          background: #fafafa;
          line-height: 1;
          display: flex;
          gap: 5px;

          span {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: red;
            line-height: 1;

            &:nth-child(2) {
              background: orange;
            }

            &:nth-child(3) {
              background: green;
            }
          }
        }
      }

      &:nth-child(odd) {
        .pic {
          order: -1;
        }
      }
    }
  }

  @media screen and (width <= 800px) {
    .container {
      width: 100%;
      margin: 30px auto;
      padding: 0 20px;

      .section {
        flex-direction: column;

        .title {
          font-size: 30px;
        }
      }

      .item {
        display: block;
        margin-bottom: 0;

        .txt {
          flex: 0 0 40%;
          padding: 0 !important;
          line-height: 1.5;

          .h1 {
            margin-top: 20px;
            color: rgb(0 0 0 / 80%);
            font-size: 20px;
          }

          .des {
            margin-top: 10px;
            margin-bottom: 10px;
            color: rgb(0 0 0 / 80%);
            font-size: 14px;
          }
        }
      }

      .otherWay {
        display: block;
      }
    }
  }
}
